﻿<!--
  Generated template for the ParkListPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>小说</ion-title>
  </ion-navbar>
  <!-- 搜索框  -->
  <ion-toolbar>
    <ion-searchbar placeholder="搜索小说" (ionInput)="searchParks($event)" (ionClear)="resetParks($event)"></ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content padding>
<!-- 下拉刷新 -->
<ion-refresher (ionRefresh)="doRefresh($event)">
  <ion-refresher-content
   pullingIcon="arrow-dropdown"
   pullingText="下拉刷新"
   refreshingSpinner="circles"
   refreshingText="数据刷新中..."
  >

  </ion-refresher-content
  >
</ion-refresher>
<!-- 列表显示 -->
<ion-list [virtualScroll]="parks" [approxItemHeight]="'200px'">
  <ion-item *virtualItem="let park" (click)="itemTapped(park)">
 <!-- 图片缩略图 -->
    <ion-thumbnail item-start>
      <ion-img [src]="park.pic" cache=true></ion-img>
    </ion-thumbnail>
    <!--  -->
    <h2>{{park.name}}</h2>
    <p>{{park.hot}}</p>
<!-- 加入书架按钮 -->
<ion-fab right bottom>
    <button ion-fab  mini (click)="add(park)">
      <ion-icon name="add"></ion-icon>
    </button>
</ion-fab>
  </ion-item>
</ion-list>
<!-- 向下滚动 -->
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
  <ion-infinite-scroll-content loadingText="加载数据...">

  </ion-infinite-scroll-content>
</ion-infinite-scroll>

</ion-content>
